//  CSS should follow BEM syntax structure moving forward.  
//  https://en.bem.info/methodology/
//  Only the references and index pages have been converted so far, 
//  see references.scss or index.scss for examples.

@import './normalize.scss';
@import './codemirror.scss';
//@import './theme_dark.scss';
@import './theme_light.scss';
@import './syntax.scss';
@import url(https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono);

$githubGreen: #33ba1d;
$sizeXS: 4px;
$size0: 8px;
$size1: 16px;
$size2: 32px;
$size3: 64px;

$borderColor: #eee;
$accentColor: #247ee9;  // blue
$shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
//  Following imports use above variables, thus imported here.
@import './index.scss';
@import './references.scss';

@mixin buttonHover {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;

  &:hover {
    background-color: $base0Dark;
    color: white;
    text-decoration: none;
  }
}

$cellButtonSize: 24px;
$cellButtonMargin: 2px;
$nbGridSquare: $cellButtonSize + 2 * $cellButtonMargin;

/* NOTE html is set to 62.5% so that all the REM measurements
throughout Skeleton are based on 10px sizing. So 1.5rem = 15px :) */
html {
  font-size: 62.5%;
}

body {
  background-color: $bodyBackground;
  color: $textColor;
  font-family:
    helvetica,
    'helvetica neue',
    arial,
    sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
}

/* Centers and gives max-width to index, references, notebook pages */
.training__inner,
.use-it-inner,
.flex-row,
.references {
  max-width: 960px;
  margin: 0 auto;
}

p,
h1,
h2,
button,
.button,
.source-link,
.typestr {
  margin: $size1;
}

p {
  font-size: $size1;
  line-height: $size2;
  color: $textColor;
}

h1,
h2 {
  letter-spacing: 0.2px;
  line-height: 1.2;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2.5rem;
}

a {
  color: $linkColor;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Don't allow SVGs to get wider than the screen. */
svg {
  max-width: 100%;
}

.button,
button {
  border: none;
  color: #fff;
  background-color: $base0;
  height: $size2;
  font-size: $size1;
  line-height: $size2;
  letter-spacing: 0.1rem;
  padding: 0 30px;
  text-align: center;
  text-transform: uppercase;

  @include buttonHover;
}

.name,
.typestr,
.retType,
.CodeMirror,
.docindex,
pre,
.output,
code {
  font-family: 'Roboto Mono', monospace;
}

header {
  background-color: $bodyBackground;
  color: $textColor;
  padding: $size0 0;
  margin-bottom: $size1;
}

.notebook-header {
  .untitled {
    color: #aaa;
  }

  h2 {
    flex: 1 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
  }

  .title {
    display: flex;
  }

  .title-input {
    flex: 1 0 auto;
  }

  .title-form {
    flex: 1 0 auto;
  }

  input {
    flex: 1 0 auto;
    align-self: center;
    height: $size1;
  }
}

.training-example {
  background: $bodyBackground;

  .training-example-inner {
    padding: $size2 0;
  }
}

//loading animation

@-webkit-keyframes loadingScreen {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes loadingScreen {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.notification-screen {
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  width: 100vw;
  background-color: $lightGrey;

  .notification-container {
    background-color: $bodyBackground;
    border: 1px solid $borderColor;
    margin: 16px auto;
    padding: 12px 40px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .error-header {
      font-size: 24px;
      line-height: 32px;
      font-weight: 600;
      color: $base6;
    }
  }

  & h1 {
    font-size: 24px;
    line-height: 32px;
    color: $base01;
    -webkit-animation-name: loadingScreen;
    animation-name: loadingScreen;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

  & p {
    margin: 4px auto;
  }
}

.inspector,
.inspector__content {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspector__list {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 1.25em;
}

.inspector__prop-list {
  padding-left: 1.75em;
}

.inspector__li {
  display: flex;
}

.inspector__toggle {
  display: inline-block;
  margin: 0 0 0 -1.25em;
  width: 1.25em;
  flex-shrink: 0;
  color: $base7;

  &::after {
    content: "◢";
  }
}

.inspector__content--pre {
  white-space: pre;
}

.inspector__prop--hidden > .inspector__content > .inspector__key {
  opacity: 0.5;
}

.inspector--show-if-collapsed {
  display: none;
}

.inspector__li:not(.inspector__li--expanded) {
  // Rules that apply to collapsed subtrees go here.
  .inspector--show-if-expanded {
    display: none;
  }

  .inspector--show-if-collapsed {
    display: initial;
  }

  .inspector__toggle::after {
    content: "▷";
  }

  .inspector__root + .inspector__root::before {
    content: " ";
  }

  .inspector__prop:not(.inspector__prop--hidden) + .inspector__prop::before {
    content: ", ";
  }

  .inspector__content:not(.inspector__content--pre) {
    white-space: nowrap;
  }

  .inspector__list {
    padding: 0;

    &,
    .inspector__li,
    .inspector__content {
      display: inline;
      white-space: nowrap;
    }

    .inspector--show-if-parent-expanded,
    .inspector__prop--hidden,
    .inspector__toggle {
      display: none;
    }
  }
}

.notebook-cell {
  button {
    position: relative;
    z-index: 1000;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    width: $cellButtonSize;
    height: $cellButtonSize;
    margin: $cellButtonMargin;
    opacity: 0; // Only display buttons when focused.

    &:hover {
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
  }

  &.notebook-cell-focus {
    button {
      opacity: 1;
    }
  }

  /* Margins for CodeMirror, pre and output should be same. */
  .CodeMirror,
  .input > pre,
  .output {
    background: none;
    margin: $size1;
    white-space: pre-wrap;
    word-break: keep-all;
    max-width: 100%;
    box-sizing: border-box;

    /* Spans the whole grid */
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  // Both input and output have a grid for buttons in the top and bottom right
  // hand corners.
  .input,
  .output-container {
    display: grid;
    grid-template-columns: 1fr $nbGridSquare;
    grid-template-rows:
      fit-content($nbGridSquare)
      1fr
      fit-content($nbGridSquare);
  }

  .input {
    background: $cellBackground;

    button.delete-button {
      /* Top right corner */
      grid-column: 2 / -1;
      grid-row: 1 / 2;
      background-image: url(./img/deleteButtonOutline.svg);

      &:hover {
        background-image: url(./img/deleteButtonFill.svg);
      }
    }

    button.run-button {
      /* Bottom right corner */
      grid-column: 2 / -1;
      grid-row: 3 / -1;
      background-image: url(./img/runButton.svg);
    }

    /* Auto-resizing cells. */
    .CodeMirror,
    .CodeMirror-scroll {
      height: auto;
    }
  }

  .output-container {
    border-bottom: $borderColor;
    border-right: $borderColor;

    .insert-button {
      /* Bottom right corner */
      grid-column: 2 / -1;
      grid-row: 3 / -1;
      background-image: url(./img/insertButton.svg);
    }
  }

  .notebook-cell-updating svg,
  .notebook-cell-updating .output {
    background-color: #cbcbd0;
  }
}

.notebook .notebook-cell {
  border-left: 1px solid $borderColor;
}

.notebook .notebook-cell-focus {
  border-left: 1px solid $accentColor;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .flex-cell {
    flex-basis: 100%;
    flex-grow: 1;
  }
}

.splash {
  padding-bottom: $size2;
  background-color: $bodyBackground;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin: $size2 0;
  background-color: $bodyBackground;

  * {
    text-transform: uppercase;
    margin: $size0;
  }
}

.doc-entries {
  overflow-x: hidden;
  background-color: $lightGrey;
}

.doc-entry {
  padding: 0;
  height: auto;
  padding-left: 0;
  border-radius: 2px;
  border-top: 1px solid $bodyBackground;
  border-bottom: 1px solid $bodyBackground;
  margin: $size1 auto;
  box-shadow: $shadow;
  background-color: $bodyBackground;
  max-width: 960px;

  .source-link {
    float: right;
    font-size: 1rem;
    color: $darkGrey;
  }

  h2 {
    font-size: 2rem;
    color: $linkColor;
    font-weight: 300;
  }

  & .arg-global-header-title {
    font-weight: bold;
  }

  ol {
    margin: 0;
  }

  &:target {
    background-color: $lightGrey;
    border-top: 1px solid $borderColor;
    border-bottom: 1px solid $borderColor;
    border-left: 2px solid $linkColor;
    box-shadow: $shadow;
  }
}

.propel-logo {
  display: flex;
  flex-direction: row;
  margin-right: $size0;
  margin-left: $size0;

  a,
  a:hover,
  a:visited,
  a:active {
    text-decoration: none;
    color: inherit;
  }

  * {
    margin: auto 0;
    margin-right: $size0;
  }

  .logo {
    display: flex;
    height: 64px;

    svg {
      margin: auto auto;
    }
  }

  .global-title {
    display: flex;
    flex-direction: column;
    margin: auto 0;

    .global-main-title {
      margin: auto 0;

      h1 {
        font-size: 2.4rem;
        font-weight: bold;
        letter-spacing: 0.2px;
      }
    }

    .global-sub-title {
      margin: auto 0;

      h2 {
        color: $accentColor;
        font-size: 1.6rem;
        letter-spacing: 0.2px;
        font-weight: 200;
      }
    }
  }
}

.dropdown {
  position: relative;

  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    width: auto;
    box-shadow: $shadow;
    background: $bodyBackground;
    z-index: 1;

    & a {
      display: block;
      white-space: nowrap;
      padding: $size0;
    }
  }

  &:hover .dropdown-content {
    display: block;
  }
}

.global-header {
  width: 100%;
  background-color: inherit;
  border-bottom: 1px solid $borderColor;

  .global-header-right {
    display: flex;
    flex-direction: row;
    margin-right: 16px;

    > * {
      display: block;
      margin: auto 0 auto 36px;
    }

    > :first-child {
      margin-left: 0;
    }

    & a {
      font-size: 1.6rem;
      line-height: 2rem;
      font-variant: all-small-caps;
      text-decoration: none;
      color: $accentColor;
      white-space: nowrap;

      &:hover {
        color: $base0Dark;
      }
    }
  }

  .global-header-inner {
    display: flex;
    max-width: 960px;
    flex-direction: row;
    justify-content: space-between;
    height: 64px;
    margin: 0 auto;
  }
}

//notebook section

.header-button {
  display: inline-block;

  @include buttonHover;
}

.blurb {
  background-color: #fff;
  box-shadow: inset 0 1px 0 #d8d8d8;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  display: flex;

  img {
    margin-right: $size0;
  }
}

.notebook-container {
  max-width: 960px;
  margin: 0 auto $size3 auto;
}

.most-recent {
  margin: 0 auto;
  padding: 0 8px;

  ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    max-width: 960px;

    li {
      grid-column-start: auto;
      grid-column-end: auto;
      grid-row-start: auto;
      grid-row-end: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: $cellBackground;
      border: 1px solid $borderColor;
      min-height: 240px;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
        background-color: $cellBackgroundFocus;
      }

      p {
        margin: 8px;
        color: $base03;
      }

      .code-snippit {
        max-height: 180px;
        margin: 8px 8px 0 8px;
        font-family: 'Roboto Mono', monospace;
        white-space: pre;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.most-recent-header {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;

  .most-recent-header-cta {
    display: grid;
    align-content: center;

    button {
      @include buttonHover;
    }
  }
}

.most-recent-header-title {
  display: flex;
}

.green-button {
  background: $githubGreen;
  color: #fff;
  border: none;

  &:hover {
    color: #fff;
    background: darken($githubGreen, 10%);
  }
}

.avatar {
  display: block;
}

//docs section
//treats .global-header uniquely
.docs {
  width: 100%;

  & .global-header {
    width: 100%;
    padding: 0 16px;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 1001;
    border-bottom: 1px solid $borderColor;
    box-shadow: $shadow;

    & > .global-header-inner {
      max-width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 64px;
      margin: 0 auto;
    }
  }
}

.doc-wrapper {
  width: 100%;
  top: 64px;
  bottom: 0;
  left: 0;
  position: absolute;
}

.panel {
  background-color: $bodyBackground;
  padding-top: 24px;

  & .propel-logo {
    border-bottom: 1px solid $base01;
    margin-bottom: 8px;
  }

  ol.docindex {
    list-style-type: none;
    margin: 0;
    padding: 0;

    & li {
      margin: 0 4px;

      &:last-child {
        margin-bottom: 32px;
      }
    }
  }
}

// Adds a checkpoint background to transparent images generated by imshow
.output canvas {
  max-width: 100%;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #efefef 25%,
      transparent 25%,
      transparent 75%,
      #efefef 75%,
      #efefef
    ),
    linear-gradient(
      45deg,
      #efefef 25%,
      transparent 25%,
      transparent 75%,
      #efefef 75%,
      #efefef
    );
  background-position: 0 0, 10px 10px;
  background-size: 21px 21px;
}

.progress-bar {
  display: none;
  border-top: 1px solid $accentColor;
}

// Mobile first. No desktop related things above this line.
@media (max-width: 1100px) {
  .most-recent {
    max-width: 640px;
  }
}

@media (min-width: 600px) {
  h1 {
    font-size: 3.2rem;
  }

  .nav-buttons {
    text-align: left;
    padding-left: 12px;
  }

  $desktopPanelSize: 250px;

  .panel {
    position: fixed;
    overflow: auto;
    width: $desktopPanelSize;
    background-color: $bodyBackground;
    height: inherit;
  }

  .doc-wrapper {
    position: fixed;
    height: calc(100vh - 64px);
  }

  .doc-entries {
    margin-left: $desktopPanelSize;
    max-width: auto;
    background-color: $lightGrey;
    overflow: auto;
    height: inherit;
    padding-left: 8px;
  }

  .flex-row {
    flex-wrap: nowrap;
    width: 100%;

    .flex-cell {
      flex-basis: 0;

      p {
        margin-bottom: 16px;
      }
    }
  }
}
